<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div id="imgmap" v-if="showmap"></div>
      <div id="mapbj-top"></div>
      <div id="mapbj-bottom"></div>
      <div id="mapbj-left"></div>
      <div id="mapbj-right"></div>
      <!-- 头部 -->
      <div
        class="head flex justify-between items-start pt-[10px] box-border px-[45px]"
      >
        <div class="headleft flex justify-start">
          <div class="bg" @click="changerules('/')">挂图首页</div>
          <div class="bg ml-5">查询统计</div>
          <div class="bg ml-5" @click="changerules('/jstzk')">建设投资</div>
          <div class="bg-select ml-5" @click="changerules('/gongdiku')">
            供地库
          </div>
        </div>
        <div class="headright flex justify-end">
          <div class="bg mr-5" @click="changerules('/lixiangku')">立项库</div>
          <div class="bg mr-5">投资进度</div>
          <div class="bg">开工竣工</div>
        </div>
      </div>
      <div class="timeandtq">
        <el-date-picker
          v-model="selectedYear"
          type="year"
          :clearable="false"
          :editable="false"
        />
      </div>
      <!-- 主体部分 -->
      <div class="left">
        <div class="content1 bg shadow anmin">
          <imgleft
            :message="'各行业供地面积占比'"
            class="px-[26px] py-[17px]"
          ></imgleft>
          <div id="echarts1"></div>
        </div>
        <div class="content2 bg shadow anmin">
          <imgleft
            :message="'各街道供地面积占比'"
            class="px-[26px] py-[17px]"
          ></imgleft>
          <div id="echarts2" v-if="showicon"></div>
          <div class="absolute top-[50%] left-[50%] echart2boxNum">
            <div class="">
              <div class="text-center text-[#19ecff] text-xl">12345</div>
              <div class="text-[#fff] text-sm">供地面积</div>
            </div>
          </div>
        </div>
        <div class="content2 bg shadow anmin">
          <imgleft
            :message="'各类供地用途分析'"
            class="px-[26px] py-[17px]"
          ></imgleft>
          <div id="echarts3"></div>
        </div>
      </div>
      <div class="center">
        <div class="centeritem bg shadow">
          <div class="centerleft">
            <img src="@/assets/images/gdkimg1.png" alt="" />
          </div>
          <div class="centerright">
            <div class="text-[#4DE4FF] text-[34px]">
              832.6<span class="text-[16px] ml-[10px]">亩</span>
            </div>
            <div>土地总面积</div>
          </div>
        </div>
        <div class="centeritem bg shadow">
          <div class="centerleft">
            <img src="@/assets/images/gdkimg2.png" alt="" />
          </div>
          <div class="centerright">
            <div class="text-[#4DE4FF] text-[34px]">
              422.5<span class="text-[16px] ml-[10px]">亩</span>
            </div>
            <div>商业用地</div>
          </div>
        </div>
        <div class="centeritem bg shadow">
          <div class="centerleft">
            <img src="@/assets/images/gdkimg3.png" alt="" />
          </div>
          <div class="centerright">
            <div class="text-[#4DE4FF] text-[34px]">
              246.7<span class="text-[16px] ml-[10px]">亩</span>
            </div>
            <div>工业用地总数</div>
          </div>
        </div>
      </div>
      <div class="right ">
        <div class="content1 bg shadow anmin">
          <imgleft :message="'数据总览'" class="px-[26px] pt-[17px]"></imgleft>
          <div class="text-center text-[14px]">累计数据总量</div>
          <div class="row px-[26px] mt-4">
            <div class="row-bg lineheight">3</div>
            <div class="row-bg lineheight">9</div>
            <div class="row-bg lineheight">8</div>
            <div class="row-bg lineheight">5</div>
            <div class="row-bg lineheight">4</div>
            <div class="row-bg lineheight">4</div>

            <div class="row-bg text-[12px] flex last">
              <div>+12%</div>
              <div>同比</div>
            </div>
          </div>
          <div class="rowBottom px-[26px] my-4">
            <div class="row-item">
              <div>出让地块(宗)</div>
              <div class="num text-[#FEDB65]">1456</div>
            </div>
            <div class="row-item">
              <div>出让面积(亩)</div>
              <div class="num text-[#00b0ed]">2345</div>
            </div>
            <div class="row-item">
              <div>出让地块(宗)</div>
              <div class="num text-[#00b0ed]">4567</div>
            </div>
            <div class="row-item">
              <div>划拨面积(亩)</div>
              <div class="num text-[#00b0ed]">7890</div>
            </div>
            <div class="row-item">
              <div>供而未用(亩)</div>
              <div class="num text-[#00b0ed]">23451</div>
            </div>
            <div class="row-item">
              <div>用而未尽(亩)</div>
              <div class="num text-[#00b0ed]">345</div>
            </div>
          </div>
        </div>
        <div class="content2 bg shadow anmin">
          <imgleft
            :message="'近五年供地趋势'"
            class="px-[26px] pt-[17px]"
          ></imgleft>
          <div id="echarts4"></div>
        </div>
        <div class="content2 bg shadow anmin">
          <imgleft
            :message="'各街道未利用土地'"
            class="px-[26px] pt-[17px]"
          ></imgleft>
          <div id="echarts5"></div>
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import imgleft from "@/components/vue/imgleft.vue";
import * as echarts from "echarts";
const dataScreenRef = ref<HTMLElement | null>(null);
import { useRouter } from "vue-router";
import { ElDatePicker } from "element-plus";

const router = useRouter();
const changerules = (url) => {
  router.push(url);
};
const showmap = ref(false);
let selectedYear = ref(new Date().getFullYear().toString());
const showicon = ref(false);
onMounted(() => {
  showmap.value = true;
  setTimeout(() => {
    initMap2();
  });
});
const initMap2 = () => {
  // 定义地图中心点坐标
  let center = new TMap.LatLng(36.6, 117.0113); // 坐标靠近中间
  // 定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(document.getElementById("imgmap"), {
    center: center,
    zoom: 10,
  });
};
onMounted(() => {
  showicon.value = true;
  setTimeout(() => {
    // 模拟数据,为圆形图后加百分比
    let data = [
      { value: 1048, name: "农,林,牧,渔业" },
      { value: 735, name: "制造业" },
      { value: 580, name: "建筑业" },
      { value: 484, name: "批发和零售业" },
      { value: 300, name: "科学研究和技术服务业" },
      { value: 300, name: "房地产业" },
    ];
    const maxnum = ref(0);
    data.forEach((element) => {
      maxnum.value += element.value;
    });
    data.map((item) => {
      item.name = `${item.name} ${((item.value / maxnum.value) * 100).toFixed(
        2
      )}%`;
    });
    echarts1(data);
    echarts2();
    echarts3();
    echarts4();
    echarts5();
  }, 50);
});
onMounted(() => {
  if (dataScreenRef.value) {
    setTimeout(() => {
      dataScreenRef.value.style.transition = `all 0.5s ease`;
    }, 100);
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});
const echarts1 = (data) => {
  var chartDom = document.getElementById("echarts1");
  var myChart = echarts.init(chartDom);
  var option = {
    legend: {
      x: "center",
      y: "bottom",
      padding: [10, 20],
      itemWidth: 20,
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "-10%",
    },
    series: [
      {
        type: "pie",
        radius: "100%",
        bottom: "100",
        left: "center",
        top: "5%",
        width: "200",
        height: "200",
        data: data,
        label: {
          formatter: "{b} ({d}%)",
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
const echarts2 = () => {
  var chartDom = document.getElementById("echarts2");
  var myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "项目类别分析",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          color: "#000",
          normal: {
            formatter: "{b}:{c}" + "\n\r" + "({d}%)",
            show: true,
            position: "left",
          },
        },

        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "民生保障类", label: { color: "#fff" } },
          { value: 735, name: "园区发展类", label: { color: "#fff" } },
          { value: 580, name: "基础设施类", label: { color: "#fff" } },
          { value: 484, name: "城市更新类", label: { color: "#fff" } },
          { value: 300, name: "产业招商类", label: { color: "#fff" } },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
};
const echarts3 = () => {
  var chartDom = document.getElementById("echarts3");
  var myChart3 = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: [
        "制锦式街道",
        "纬北路街道",
        "官扎营街道",
        "堤口路街道",
        "南村街道",
        "药山街道",
        "泺口街道",
        "北坦街道",
      ],
      axisLabel: {
        rotate: -45, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：亩",
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
    },
    grid: {
      top: "15%",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130, 120],
        type: "bar",
        showBackground: false,
        barWidth: "16px", //柱体宽度
        itemStyle: {
          barBorderRadius: [2, 2, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0EECE4",
            },
            {
              offset: 1,
              color: "#058FE7",
            },
          ]),
        },
      },
    ],
  };

  option && myChart3.setOption(option);
};
const echarts4 = () => {
  var chartDom = document.getElementById("echarts4");
  var myChart4 = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: ["2020", "2021", "2022", "2023", "2024"],
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：亩",
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
    },
    grid: {
      top: "15%",
      bottom: "15%",
      left: "15%",
      right: "5%",
    },
    series: [
      {
        data: [932, 901, 934, 1290, 1330],
        type: "line",
        symbol: "none",
        smooth: true,
        lineStyle: {
          width: 4,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00F2EF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#06AEF6", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  option && myChart4.setOption(option);
};
const echarts5 = () => {
  var chartDom = document.getElementById("echarts5");
  var myChart5 = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: [
        "制锦式街道",
        "纬北路街道",
        "官扎营街道",
        "堤口路街道",
        "南村街道",
        "药山街道",
        "泺口街道",
        "北坦街道",
      ],
      axisLabel: {
        rotate: -45,
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：亩",
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
    },
    grid: {
      top: "15%",
      bottom: "30%",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130, 120],
        type: "bar",
        showBackground: false,
        barWidth: "16px", //柱体宽度
        itemStyle: {
          barBorderRadius: [10, 10, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#29317A",
            },
            {
              offset: 1,
              color: "#225CF0",
            },
          ]),
        },
      },
    ],
  };

  option && myChart5.setOption(option);
};

const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};


const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
</script>
<style scoped lang="scss">
.dataScreen-container {
  width: 100%;
  height: 100%;

  .dataScreen-content {
    position: fixed;
    background-image: url("@/assets/images/gdkimg7.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: left top;
    position: relative;

    #mapbj {
      background-image: url("@/assets/images/gdkimg7.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 4;
      // border:1px solid red
    }
    #mapbj-top {
      background-image: url("@/assets/images/mapbg-top.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 313px;
      z-index: 4;
    }
    #mapbj-bottom {
      background-image: url("@/assets/images/mapbg-bottom.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 163px;
      z-index: 4;
    }
    #mapbj-left {
      background-image: url("@/assets/images/mapbg-left.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      left: 0;
      top: 0;
      width: 74px;
      height: calc(100%);
      z-index: 4;
    }
    #mapbj-right {
      background-image: url("@/assets/images/mapbg-right.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      right: 0;
      top: 0;
      width: 74px;
      height: calc(100%);
      z-index: 4;
    }
    #imgmap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .head {
      background-image: url("@/assets/images/headimg.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 100% 100%;
      min-height: 75px;
      width: 100%;
      position: relative;
      z-index: 10;
      max-height: 75px;

      .bg-select {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexheadselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
      .bg {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexunselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
    }
    .headButton {
      padding-left: 230px;
      display: flex;
      justify-content: left;
      transform: translateY(-8px);
      gap: 20px;
      .button {
        width: 170px;
        height: 34px;
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 34px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
      }
      .select {
        background-image: url("@/assets/images/changbuttonselect.png");
      }
      .unselect {
        background-image: url("@/assets/images/chengButton.png");
      }
    }
  }
}
// .body {
//   height: calc(100% - 75px);
//   padding: 20px;
//   padding-top: 40px;
//   display: flex;
//   gap: 20px;
//   box-sizing: border-box;
//   justify-content: space-between;
//   position: absolute;
//   z-index: 10;
//   top: 75px;
//   border: 1px solid red;
.left {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  z-index: 99;
  height: calc(100% - 75px - 40px - 20px);
  left: 20px;
  top: 115px;
  .content1 {
    height: 40%;
    display: flex;
    flex-direction: column;
    #echarts1 {
      flex: 1;
      width: 100%;
    }
  }
  .content2 {
    height: 30%;
    display: flex;
    flex-direction: column;
    position: relative;
    #echarts2 {
      flex: 1;
      width: 100%;
    }
    #echarts3 {
      flex: 1;
      width: 100%;
    }
    .echart2boxNum {
      transform: translate(-50%, -0%);
    }
  }
}
.right {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  z-index: 99;
  height: calc(100% - 75px - 40px - 20px);
  right: 20px;
  top: 115px;
  .content1 {
    height: 40%;
    display: flex;
    flex-direction: column;
    .row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      text-align: center;
      font-size: 38.74px;
      min-width: 50px;
      min-height: 50px;
      color: #66ffff;
      .row-bg {
        background-image: url("@/assets/images/gdkimg5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
      }
      .lineheight {
        line-height: 50px;
      }
      .last {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    .rowBottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      flex: 1;
      .row-item {
        background-image: url("@/assets/images/gdkimg6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: calc(50% - 5px);
        height: calc(33% - 10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        padding-left: 10px;
        box-sizing: border-box;
        .num {
          font-size: 20.6px;
        }
      }
    }
  }
  .content2 {
    height: 30%;
    display: flex;
    flex-direction: column;
    #echarts4 {
      flex: 1;
      width: 100%;
    }
    #echarts5 {
      flex: 1;
      width: 100%;
    }
  }
}
.center {
  width: calc(56% - 80px);
  display: flex;
  height: 110px;
  justify-content: space-between;
  // border: 1px solid red;
  position: absolute;
  left: 50%;
  top: 115px;
  z-index: 99;
  transform: translateX(-50%);
  .centeritem {
    width: 32%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    .centerleft {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        min-width: 68.87px;
        height: 68.87px;
      }
    }
    .centerright {
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
.bg {
  background-image: url("@/assets/images/gdkbg.png");
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
// }
.timeandtq {
  position: absolute;
  top: 75px;
  z-index: 999;
}
:deep(.el-input__wrapper) {
  background-color: rgba($color: #000000, $alpha: 0);
  border: 0px solid #04072f !important;
  box-shadow: none !important;
  .el-input__prefix {
    color: #fff;
  }
  .el-input__inner {
    color: #fff;
  }
}
</style>
